import React, { Component } from 'react';
import {
  View,Text,StyleSheet,ScrollView,FlatList,
    Platform
} from 'react-native';
import moment from 'moment';
import pxToDp from '../common/comm';
import toDate from '../common/comm';
import * as DATA from '../data/data'

export default class TixianInfo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tixianInfolist: [],
      loginkey: this.props.navigation.state.params.loginkey||null
    }
  }

  static navigationOptions={
    headerTintColor:'#fff',
    headerTitle: '提现记录',
    headerStyle: {
      backgroundColor: DATA.BASE_COLOR,
        height:Platform.OS === 'android'?pxToDp(84):pxToDp(110)
    },
    headerTitleStyle: {
      color: '#fff',
      fontSize: pxToDp(34),
        marginLeft:Platform.OS === 'android'?pxToDp(185):null
    },
    gesturesEnabled :true
  }

  componentWillMount() {
    let _that = this;
    let data2 = 'loginkey=' + this.state.loginkey;
    fetch(DATA.TIXIANRECORD_URL, {
      method: "POST",
      headers: {'Content-Type': 'application/x-www-form-urlencoded'},
      body: data2
    })
        .then((response) => {       // 数据解析方式
          if (response.ok) {
            return response.json();
          }
        })
        .then((responseData) => {       // 获取到的数据处理
          if (responseData.status == 1) {
            _that.setState({
              tixianInfolist: responseData.list
            })
          }
        })
        .catch((error) => { // 错误处理
          alert('获取数据失败，请重试！');
        })
        .done();
  }

  render() {
    return (
      <ScrollView
        contentContainerStyle={styles.contentContainer}
      >
        <View style={styles.container}>
          <View style={styles.title}>
            <Text style={styles.titleItem}>申请时间</Text>
            <Text style={styles.titleItem}>提现金额</Text>
            <Text style={styles.titleItem}>提现状态</Text>
            <Text style={styles.titleItem}>转账时间</Text>
          </View>
          <TixianInfoList data={this.state.tixianInfolist}/>
        </View>
      </ScrollView>
    );
  }
}

class TixianInfoList extends Component {
  componentWillMount() {
    if (this.props.data.length != 0) {
      for (let i = 0; i < this.props.data.length; i++) {
        this.props.data[i]["key"] = i;
      }
    }
  }

  renderItem({item}) {
    return (
        <View
            style={styles.item}
            onPress={() => {item}}
        >
          <Text style={styles.content}>{moment(item.addtime*1000).format("YYYY-MM-DD HH:mm:ss")}</Text>
          <Text style={styles.content}>{item.money}元</Text>
          <Text style={styles.content}>{item.status == 1?'未处理':(item.status ==2?'转账成功':'转账失败')}</Text>
          <Text style={styles.content}>{moment(item.zztime*1000).format("YYYY-MM-DD")}</Text>
        </View >
    );
  }

  render() {
    return (
        <ScrollView>
          <FlatList
              data={this.props.data}
              renderItem={this.renderItem}
          >
          </FlatList>
        </ScrollView>
    );
  }
}

var styles = StyleSheet.create({
  container: {
    paddingVertical: pxToDp(20),
    justifyContent: 'center'
  },
  title: {
    flexDirection:'row',
    marginBottom:pxToDp(20)
  },
  titleItem: {
    flex: 1,
    fontSize: pxToDp(28),
    textAlign:'center'
  },
  item: {
    flexDirection: 'row',
    height: pxToDp(100),
    borderBottomWidth: 1,
    borderBottomColor:'#ccc'
  },
  content: {
    flex: 1,
    fontSize:pxToDp(28),
    textAlign: 'center',
    paddingTop:pxToDp(30)
  }
  });
